<template>
<div class="contentmain">
        <el-row>
            <el-col :span="5" style="float:left">
                <el-button type="primary" @click="out">导出</el-button>
            </el-col>
            <el-col :span="19" style="float:right">
                <el-form :inline="true" :model="f" class="demo-form-inline">
                    <el-form-item style="float:right">
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="float:right">
                        <el-select v-model="f.shops" placeholder="门店" :disabled="!shiro">
                            <el-option label="全部" value="-1"></el-option>
                            <el-option v-for="item in items" :label="item.shopName" :key="item.shopId" :value="item.shopId"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item style="float:right">
                        <el-date-picker
                            v-model="f.value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                    </el-form-item>
                    <el-form-item style="float:right">
                        <el-input v-model="f.stockid" placeholder="商品编号"></el-input>
                    </el-form-item>
                    <!-- <el-form-item style="float:right">
                        <el-input v-model="f.gna" placeholder="商品名称"></el-input>
                    </el-form-item> -->
                </el-form>
            </el-col>
        </el-row>

        

        <el-row>
            <el-col :span="24">
                <el-table ref="multipleTable" :data="td" tooltip-effect="dark" style="width: 100%" v-loading="loading" element-loading-text="数据加载中...">
                    <el-table-column label="门店">
                        <template slot-scope="scope">
                            {{shopname(scope.row.shopId)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodsId" label="商品编号">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称">
                    </el-table-column>
                    <el-table-column prop="orderCode" label="订单编号" width="300">
                        <template slot-scope="scope">
                            <span style="margin-right: 10px">{{ scope.row.orderCode }}</span>
                            <el-tag type="primary">{{scope.row.payType}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单来源" width="180">
                        <template slot-scope="scope">
                            <el-tag type="success">{{scope.row.tag1}}</el-tag>
                            <el-tag type="primary" v-if="scope.row.tag2!=undefined">{{scope.row.tag2}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售时间">
                        <template slot-scope="scope">
                            {{scope.row.payTime | format}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="销售规格">
                    </el-table-column>
                    <el-table-column prop="stockNum" label="当前库存">
                    </el-table-column>
                    <el-table-column prop="spec" label="单位">
                    </el-table-column>
                    <el-table-column prop="price" label="单价/元">
                    </el-table-column>
                    <el-table-column prop="orderPrice" label="总金额/元">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="detial(scope.$index, scope.row)">查看更多</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8" :offset="16">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="pagecount">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    data(){
        return{
            items:[],
            td:[],
            opt:[],
            f:{},
            loading:false,
            currentPage:1,
            pagecount:0,
            activeName:"online",
            listHashMap:{},
            shiro:this.$store.state.shiro
        }
    },
    filters:{
        format(v){
            return moment(v).format("YYYY-MM-DD")
        }
    },
    computed:{
        getshop(){
            return this.$store.state.TOPshopID
        }
    },
    watch:{
        getshop(v){//获取右上角的指定店铺
            var pp=new URLSearchParams()
            if(this.f.stockid){
                pp.append('goodId',this.f.stockid)
            }
            if(this.f.value1){
                pp.append('createTime',moment(this.f.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('endTime',moment(this.f.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            if(this.$store.state.TOPshopID!=-1){
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            this.getData(pp)
        }
    },
    created(){
        if(isDetailBack){
        var _this=this
        this.opt=[]
        axios.get('/shop/listShop.do').then(r=>{
            if(r.data.code!=200){
                _this.$message.error(r.data.message)
                return
            }
            _this.opt=[].concat(r.data.response.shopList)
            _this.items=[].concat(r.data.response.shopList)
            var pp=new URLSearchParams()
            if(!_this.$store.state.shiro){
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            _this.getData(pp)
        })
        }
    },
    methods:{
        shopname(v){//将shopId转为店铺名称
            if(!v){return}
            for(var i=0;i<this.opt.length;i++){
                if(v==this.opt[i].shopId){
                    return this.opt[i].shopName
                }
            }
        },
        onSubmit(){//搜索
            var pp=new URLSearchParams()
            if(this.$store.state.shiro){
                if(this.f.shops&&this.f.shops!=-1){
                    pp.append('shopId',this.f.shops)
                }else{
                    if(this.$store.state.TOPshopID!=-1&&this.f.shops!=-1&&this.f.shops){
                        pp.append('shopId',this.$store.state.TOPshopID)
                    }
                }
            }else{
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            // if(this.f.gna){
            //     pp.append('goodsName',this.f.gna)
            // }
            if(this.f.stockid){
                pp.append('goodId',this.f.stockid)
            }
            if(this.f.value1){
                pp.append('createTime',moment(this.f.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('endTime',moment(this.f.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            this.getData(pp)
        },
        handleSizeChange(i){//翻页
            this.topage(i)
        },
        handleCurrentChange(i){//翻页
            this.topage(i)
        },
        detial(i,r){//跳转详情页
            this.$router.push({path: '/Detial', query: {id: r.goodsId,type:6}})
        },
        topage(i){
            var pp=new URLSearchParams()
            pp.append("pageNo",i)
            if(this.$store.state.shiro){
                if(this.f.shops&&this.f.shops!=-1){
                    pp.append('shopId',this.f.shops)
                }else{
                    if(this.$store.state.TOPshopID!=-1&&this.f.shops!=-1&&this.f.shops){
                        pp.append('shopId',this.$store.state.TOPshopID)
                    }
                }
            }else{
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            // if(this.f.gna){
            //     pp.append('goodsName',this.f.gna)
            // }
            if(this.f.stockid){
                pp.append('goodId',this.f.stockid)
            }
            if(this.f.value1){
                pp.append('createTime',moment(this.f.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('endTime',moment(this.f.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            this.getData(pp)
        },
        changesource(){//分割字段
            for(var i=0;i<this.td.length;i++){
                if(this.td[i].source){
                    var source=this.td[i].source
                    var arr=[]
                    arr=source.split("-")
                    this.td[i].tag1=arr[0]
                    this.td[i].tag2=arr[1]
                }
            }
        },
        out(){//导出
            var _this=this
            var pp=new URLSearchParams()
            if(this.$store.state.shiro){
                if(this.f.shops&&this.f.shops!=-1){
                    pp.append('shopId',this.f.shops)
                }else{
                    if(this.$store.state.TOPshopID!=-1&&this.f.shops!=-1&&this.f.shops){
                        pp.append('shopId',this.$store.state.TOPshopID)
                    }
                }
            }else{
                pp.append('shopId',this.$store.state.TOPshopID)
            }
            if(this.f.stockid){
                pp.append('goodId',this.f.stockid)
            }
            if(this.f.value1){
                pp.append('createTime',moment(this.f.value1[0]).format("YYYY-MM-DD HH:mm:ss"))
                pp.append('endTime',moment(this.f.value1[1]).format("YYYY-MM-DD HH:mm:ss"))
            }
            window.open(HOST+'/getXcxOrderXSByExcel.do?'+pp.toString())
        },
        getData(v){//获取数据
            var _this=this
            this.td=[]
            this.loading=true
            axios.get('/xcxOrderXS.do',{params:v}).then(r=>{
                if(r.data.message=="not login"&&r.data.code==500){
                    _this.$message.error("访问者,请登录")
                    router.push('/Login');
                    return
                }
                if(r.data.code==200){
                    _this.td=[].concat(r.data.response.listHashMap.pagedList)
                    _this.pagecount=r.data.response.listHashMap.page1.totalCount
                    _this.changesource()
                    _this.loading=false
                }else{
                    _this.$message.error(r.data.message)
                    _this.loading=false
                }
            })
        }
    }
}
</script>
